<template>
  <el-dialog class="bigdialog" top="5%" v-model="centerDialogVisible" :show-close="false" width="450px" center>
    <div class="turn" v-loading="loading">
      <div id="closer" @click="close">
        <span>
          <el-icon color="#b5b6c8" size="16">
            <CloseBold />
          </el-icon>
        </span>
      </div>
      <ul class="vip">
        <li :class="imgindex == index ? 'active' : ''" v-for="(item, index) in imglist" @click="vipchoose(index)"
          :key="index">
          <span>{{ item.name }} {{ index }}</span>
          <NuxtImg v-if="imgindex != index" :src="item.img" alt="" />
          <NuxtImg v-else :src="item.imghover" alt="" />
        </li>
      </ul>

      <p>
        <span @click="opendialog('dialog2')">{{
    $t("language.turntable.title")
  }}</span>
        <strong @click="opendialog('dialog1')">?</strong>
      </p>
      <el-carousel ref="carouselRef" height="400px" :autoplay="false" indicator-position="none">
        <el-carousel-item v-for="(item, index) in imglist" :key="index">
          <div class="turntable">
            <NuxtImg class="border" src="/img/turnbg.png" alt="" />
            <div class="colorbg">
              <NuxtImg src="/img/center.png" alt="" />
            </div>
            <div class="rotate" :class="isrotate ? 'rotatestart' : ''">
              <NuxtImg class="background" src="/img/colorbg.png" alt="" />
              <div class="bg">
                <div style="transform: rotate(-30deg)">
                  <span>0.20</span>
                  <NuxtImg src="/img/turn3.png" alt="" />
                </div>
                <div style="transform: rotate(-60deg)">
                  <span>Sem</span>
                  <NuxtImg src="/img/turn1.png" alt="" />
                </div>
                <div style="transform: rotate(-90deg)">
                  <span>0.50</span>
                  <NuxtImg src="/img/turn3.png" alt="" />
                </div>
                <div style="transform: rotate(-120deg)">
                  <span>Sem</span>
                  <NuxtImg src="/img/turn1.png" alt="" />
                </div>
                <div style="transform: rotate(-150deg)">
                  <span>0.80</span>
                  <NuxtImg src="/img/turn3.png" alt="" />
                </div>
                <div style="transform: rotate(-180deg)">
                  <span>Sem</span>
                  <NuxtImg src="/img/turn1.png" alt="" />
                </div>
                <div style="transform: rotate(-210deg)">
                  <span>1.50</span>
                  <NuxtImg src="/img/turn3.png" alt="" />
                </div>
                <div style="transform: rotate(-240deg)">
                  <span>Sem</span>
                  <NuxtImg src="/img/turn1.png" alt="" />
                </div>
                <div style="transform: rotate(-270deg)">
                  <span>SONY</span>
                  <NuxtImg src="/img/turn2.png" alt="" />
                </div>
                <div style="transform: rotate(-300deg)">
                  <span>Sem</span>
                  <NuxtImg src="/img/turn1.png" alt="" />
                </div>
                <div style="transform: rotate(-330deg)">
                  <span>5.00</span>
                  <NuxtImg src="/img/turn3.png" alt="" />
                </div>
                <div style="transform: rotate(-360deg)">
                  <span>Sem</span>
                  <NuxtImg src="/img/turn1.png" alt="" />
                </div>
              </div>
            </div>

          </div>
        </el-carousel-item>
      </el-carousel>

      <el-button class="start" @click="rotate">
        {{ $t("language.turntable.start") }}</el-button>
      <ol class="bottom">
        <li>
          <span>{{ $t("language.turntable.btn1") }}</span>
          <strong>{{ $t("language.turntable.money") }}99771848.36</strong>
        </li>
        <li>
          <el-icon color="#a4adc2" size="16">
            <ArrowRightBold />
          </el-icon>
          <el-carousel indicator-position="none" direction="vertical" height="80px">
            <el-carousel-item v-for="item in listData">
              <dl class="auto" @click="opendialog('dialog3')">
                <dd>
                  <div>
                    <NuxtImg src="/img/turn3.png" alt="" />
                    <span>{{ item.name }}</span>
                  </div>
                  <p>
                    {{ item.div }}<span>{{ item.span1 }}</span><i>{{ item.span2 }}</i>
                  </p>
                </dd>
                <dd>
                  {{ item.p }} <strong>{{ item.strong }}</strong>
                </dd>
              </dl>
            </el-carousel-item>
          </el-carousel>

        </li>
      </ol>
    </div>
    <div class="commondialog">
      <el-dialog v-model="dialogVisible" :show-close="false" width="600px">
        <div id="closer" style="border-bottom: 1px solid #4a4c53; padding-bottom: 15px" @click="dialogVisible = false">
          <strong></strong>
          <h4 v-if="dialogtype != 'dialog1'">
            {{ $t("language.turntable.warntitle") }}
          </h4>
          <span>
            <el-icon color="#b5b6c8" size="16">
              <CloseBold />
            </el-icon>
          </span>
        </div>
        <div class="main" v-if="dialogtype == 'dialog1'">
          <p>{{ $t("language.turntable.warntip") }}</p>
          <strong> {{ $t("language.turntable.warnbold") }}</strong>
        </div>
        <table v-if="dialogtype == 'dialog2'">
          <thead>
            <tr>
              <th width="33.33%">
                {{ $t("language.turntable.tablehead1") }}
              </th>
              <th width="33.33%">
                {{ $t("language.turntable.tablehead2") }}
              </th>
              <th width="33.33%">
                {{ $t("language.turntable.tablehead3") }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1A6Nb9jH</td>
              <td>VIP 1 Giro</td>
              <td>
                <NuxtImg src="/img/turn3.png" alt="" />
                <span>0.02</span>
              </td>
            </tr>
            <tr>
              <td>1A6Nb9jH</td>
              <td>VIP 1 Giro</td>
              <td>
                <NuxtImg src="/img/turn3.png" alt="" />
                <span>0.02</span>
              </td>
            </tr>
            <tr>
              <td>1A6Nb9jH</td>
              <td>VIP 1 Giro</td>
              <td>
                <NuxtImg src="/img/turn3.png" alt="" />
                <span>0.02</span>
              </td>
            </tr>
            <tr>
              <td>1A6Nb9jH</td>
              <td>VIP 1 Giro</td>
              <td>
                <NuxtImg src="/img/turn3.png" alt="" />
                <span>0.02</span>
              </td>
            </tr>
            <tr>
              <td>1A6Nb9jH</td>
              <td>VIP 1 Giro</td>
              <td>
                <NuxtImg src="/img/turn3.png" alt="" />
                <span>0.02</span>
              </td>
            </tr>
          </tbody>
        </table>
        <table v-if="dialogtype == 'dialog3'">
          <thead>
            <tr>
              <th width="33.33%">
                {{ $t("language.turntable.tablehead4") }}
              </th>
              <th width="33.33%">
                {{ $t("language.turntable.tablehead2") }}
              </th>
              <th width="33.33%">
                {{ $t("language.turntable.tablehead3") }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1A6Nb9jH</td>
              <td>VIP 1 Giro</td>
              <td>
                <NuxtImg src="/img/turn3.png" alt="" />
                <span>0.02</span>
              </td>
            </tr>
            <tr>
              <td>1A6Nb9jH</td>
              <td>VIP 1 Giro</td>
              <td>
                <NuxtImg src="/img/turn3.png" alt="" />
                <span>0.02</span>
              </td>
            </tr>
            <tr>
              <td>1A6Nb9jH</td>
              <td>VIP 1 Giro</td>
              <td>
                <NuxtImg src="/img/turn3.png" alt="" />
                <span>0.02</span>
              </td>
            </tr>
            <tr>
              <td>1A6Nb9jH</td>
              <td>VIP 1 Giro</td>
              <td>
                <NuxtImg src="/img/turn3.png" alt="" />
                <span>0.02</span>
              </td>
            </tr>
            <tr>
              <td>1A6Nb9jH</td>
              <td>VIP 1 Giro</td>
              <td>
                <NuxtImg src="/img/turn3.png" alt="" />
                <span>0.02</span>
              </td>
            </tr>
            <tr>
              <td>1A6Nb9jH</td>
              <td>VIP 1 Giro</td>
              <td>
                <NuxtImg src="/img/turn3.png" alt="" />
                <span>0.02</span>
              </td>
            </tr>
            <tr>
              <td>1A6Nb9jH</td>
              <td>VIP 1 Giro</td>
              <td>
                <NuxtImg src="/img/turn3.png" alt="" />
                <span>0.02</span>
              </td>
            </tr>
            <tr>
              <td>1A6Nb9jH</td>
              <td>VIP 1 Giro</td>
              <td>
                <NuxtImg src="/img/turn3.png" alt="" />
                <span>0.02</span>
              </td>
            </tr>
            <tr>
              <td>1A6Nb9jH</td>
              <td>VIP 1 Giro</td>
              <td>
                <NuxtImg src="/img/turn3.png" alt="" />
                <span>0.02</span>
              </td>
            </tr>
            <tr>
              <td>1A6Nb9jH</td>
              <td>VIP 1 Giro</td>
              <td>
                <NuxtImg src="/img/turn3.png" alt="" />
                <span>0.02</span>
              </td>
            </tr>
            <tr>
              <td>1A6Nb9jH</td>
              <td>VIP 1 Giro</td>
              <td>
                <NuxtImg src="/img/turn3.png" alt="" />
                <span>0.02</span>
              </td>
            </tr>
          </tbody>
        </table>
      </el-dialog>
    </div>
    <div class="fullscreen">
      <el-dialog v-model="fullVisible" top="5%" :show-close="false" width="600px">
        <div id="bigcloser" style="padding-bottom: 15px" @click="fullVisible = false">
          <strong></strong>
          <h4 v-if="dialogtype != 'dialog1'">
            {{ $t("language.turntable.warntitle") }}
          </h4>
          <span>
            <el-icon color="#fff" size="16">
              <CloseBold />
            </el-icon>
          </span>
        </div>
        <div class="lucky">
          <NuxtImg src="/img/dl1.png" alt="" />
          <div class="text">
            <NuxtImg src="/img/turn3.png" alt="" />
            <strong>+0.20</strong>
            <span>0.2 {{ $t("language.turntable.dan") }}</span>
          </div>
          <el-divider>{{ $t("language.turntable.line") }}</el-divider>
          <div class="imglist">
            <NuxtImg src="/img/dl2.png" alt="" />
            <NuxtImg src="/img/dl3.png" alt="" />
            <NuxtImg src="/img/dl4.png" alt="" />
            <NuxtImg src="/img/dl5.png" alt="" />
          </div>
        </div>
      </el-dialog>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, watch, shallowRef, reactive, computed } from "vue";
import { CloseBold, ArrowRightBold } from '@element-plus/icons-vue'
const store = useStore()
const centerDialogVisible = computed(() => store.turnTable);
const dialogVisible = shallowRef<boolean>(false);
const fullVisible = shallowRef<boolean>(false);
// const getImg = (url) => {
//   return new URL(`../..//img/${url}`, import.meta.url).href;
// };
let iscomponent = ref<string>("login");
let opendialog = (type: string) => {
  dialogVisible.value = true;
  dialogtype.value = type;
};
let loading = ref(false)
watch(() => centerDialogVisible.value, (newval) => {
  if (newval) {
    loading.value = false
    // let time = setInterval(() => {
    //   // ElLoading.service({
    //   //   lock: true,
    //   //   background: 'rgba(0, 0, 0, 0.7)',
    //   //   customClass: 'el-loading'
    //   // }).close()
    //   loading.value = false
    //   clearInterval(time)
    // }, 500)
  }

}, {

})
let dialogtype = shallowRef<string>("dialog1");
let close = () => {
  // centerDialogVisible.value = false;
  store.$patch({ turnTable: false })
  iscomponent.value = "login";
};

let listData = reactive<{
  name: string,
  div: string,
  span1: string,
  span2: string,
  p: string,
  strong: string,
}[]>([
  {
    name: "8G36S50t",
    div: "Win:",
    span1: "2.00 ",
    span2: "2 B6nus",
    p: "in",
    strong: "VIP 0 Giro",
  },
  {
    name: "8G36S50t",
    div: "Win:",
    span1: "2.00 ",
    span2: "2 B6nus",
    p: "in",
    strong: "VIP 0 Giro",
  },
  {
    name: "8G36S50t",
    div: "Win:",
    span1: "2.00 ",
    span2: "2 B6nus",
    p: "in",
    strong: "VIP 0 Giro",
  },
]);

let isrotate = shallowRef<boolean>(false);
let time: any = null;
let rotate = () => {
  if (!time) {
    isrotate.value = true;
    time = setInterval(() => {
      clearInterval(time);
      time = null;
      isrotate.value = false;
      fullVisible.value = true;
    }, 5000);
  }
};
let open = () => {
  // centerDialogVisible.value = true;
  store.$patch({ turnTable: true })
  // console.log(centerDialogVisible.value, "ooo");
};
let imgindex = shallowRef<number>(0);
let imglist = reactive<{ img: string, imghover: string, name: string }[]>([
  {
    img: "/img/nolight.png",
    imghover: "/img/light.png",
    name: "VIP",
  },
  {
    img: "/img/nolight.png",
    imghover: "/img/light.png",
    name: "VIP",
  },
  {
    img: "/img/nolight.png",
    imghover: "/img/light.png",
    name: "VIP",
  },
]);
// // let swiper = ref(null);
let carouselRef = shallowRef<null | any>(null)
let vipchoose = (index: number) => {
  imgindex.value = index;
  carouselRef.value.setActiveItem(index)
};

defineExpose({
  open,
});
</script>
<style lang="scss">
.bigdialog {
  padding: 0 !important;
  padding: 10px 20px 50px !important;
  border-radius: 10px;
  background: url('assets/img/bigbg.png') no-repeat;
  background-size: cover;

  .el-dialog__header {
    padding: 0 !important;
  }
}
</style>
<style lang="scss" scoped>
.bigdialog {

  padding: 0 !important;

  .el-dialog {
    padding: 10px !important;
    background-color: #32353e !important;
    --el-dialog-bg-color: #32353e !important;
  }

  .commondialog {
    :deep(.el-dialog) {
      border-radius: 10px;
      padding: 10px 20px 40px !important;
      background: #32353e;
    }

    .main {
      padding: 30px 0 0px 0;

      p {
        font-size: 14px;
        color: #b5bacb;
      }

      strong {
        font-size: 14px;
        color: #fff;
        font-weight: normal;
        display: block;
        margin-top: 15px;
      }
    }

    table {
      border-collapse: collapse;
      margin-top: 20px;
      width: 100%;
      padding: 0;

      th {
        text-align: center;
        font-size: 14px;
        color: #b5bac8;
        height: 100%;
        padding: 8px;
        line-height: 24px;
        font-weight: bold;
        background-color: #292c34;
      }

      td {
        text-align: center;
        font-size: 14px;

        color: #b5bac8;
        padding: 10px 8px;
      }

      tbody {
        tr {
          td {
            text-align: center;
          }


          td:nth-child(3) {
            @include flex(row, center, center);

            img {
              width: 18px;
              margin-right: 7px;
            }

            span {
              font-size: 12px;
              color: #2df449;
            }
          }
        }
      }
    }
  }

  /* 定义一个旋转动画 */
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(3600deg);
      /* 360度 x 50次 */
    }
  }

  .rotatestart {
    animation: rotate 4.5s 1;
    transition-timing-function: ease-out;
    /* 低俗开始，低速结束 */
  }

  .fullscreen {
    :deep(.el-dialog) {
      padding: 10px !important;
      background-color: rgba(0, 0, 0) !important;
      --el-dialog-bg-color: rgba(0, 0, 0) !important;
    }

    #bigcloser {
      width: 100%;
      @include flex(row, flex-end, center);
      border-bottom: none;

      strong {
        display: block;
        width: 28px;
        height: 28px;
      }

      h4 {
        text-align: center;
        font-size: 18px;
        color: #fff;
        flex: 1;
      }

      span {
        display: block;
        width: 28px;
        height: 28px;
        @include flex(row, center, center);
        border: 2px solid #fff;
        border-radius: 16px;
      }
    }

    .lucky {
      @include flex(column, center, center);
      padding: 140px 10px 0;
      height: 100%;

      :deep(.el-divider__text) {
        background-color: rgba(0, 0, 0);
        color: #b5b9c5;
      }

      >img {
        width: 100%;
      }

      .text {
        width: 100%;
        @include flex(row, center, center);

        img {
          width: 40px;
          margin-right: 5px;
        }

        span {
          font-size: 24px;
          color: #fff;
        }

        strong {
          font-size: 24px;
          color: #2df449;
          padding-right: 6px;
        }
      }

      .imglist {
        width: 100%;
        @include flex(row, center, center);
        margin-top: 10px;

        img {
          width: 55px;
        }

        img+img {
          margin-left: 40px;
        }
      }
    }
  }

  #closer {
    width: 100%;
    @include flex(row, flex-end, center);
    cursor: pointer;

    strong {
      display: block;
      width: 28px;
      height: 28px;
    }

    h4 {
      text-align: center;
      font-size: 18px;
      color: #fff;
      flex: 1;
    }

    span {
      display: block;
      width: 28px;
      height: 28px;
      @include flex(row, center, center);
      border: 2px solid #b5b6c8;
      border-radius: 16px;
    }
  }

  .turn {
    width: 100%;



    .lun {

      position: absolute;
      z-index: -1;
      left: 0px;
      top: 0;
      width: 100%;
    }

    .start {
      display: block;
      margin: 0 auto;
      width: 45%;
      height: 30px;
      background-color: #0a8c6a;
      color: #fff;
      border: none;
      font-size: 16px;
      border-radius: 5px;
      text-align: center;
      margin: 15px auto 30px;
    }

    .vip {
      @include flex(row, flex-start, center);
      margin-top: -12px;

      .active {
        span {
          color: #fff;
        }

        background-color: #0a8c6a;
      }

      li {
        width: 70px;
        height: 70px;
        background-color: #1d1e22;
        border-radius: 5px;
        @include flex(column, flex-start, center);
        cursor: pointer;

        span {
          font-size: 15px;
          color: #b5b6c8;
        }

        img {
          width: 45px;
        }
      }
    }

    >P {
      @include flex(row, flex-end, center);
      height: 50px;
      padding-right: 20px;

      span {
        font-size: 15px;
        color: #b5b6c8;
      }

      strong {
        margin-left: 10px;
        width: 18px;
        height: 18px;
        cursor: pointer;
        display: block;
        background-color: #0a8c6a;
        text-align: center;
        line-height: 18px;
        font-size: 16px;
        color: #fff;
        border-radius: 9px;
        font-weight: normal;
      }
    }

    .turntable {
      height: 340px;
      width: 340px;

      background-size: 100% 100%;
      margin: 0 auto;
      position: relative;


      .border {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 5;
        left: 0;
        top: 0;
      }

      .rotate {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 3;

        .background {
          position: absolute;
          width: 255px;
          height: 255px;
          left: 50%;
          z-index: 2;
          top: 50%;
          margin-left: -127.5px;
          margin-top: -127.5px;
        }
      }


      .colorbg {
        height: 340px;
        z-index: 10;
        width: 340px;
        position: absolute;
        left: 50%;
        margin-left: -170px;
        top: 50%;
        margin-top: -170px;

        >img {
          width: 75px;
          height: 75px;
          position: absolute;
          left: 50%;
          top: 50%;
          z-index: 14;
          margin-left: -37.5px;
          margin-top: -37.5px;
        }
      }

      .bg {
        height: 250px;
        width: 250px;
        position: absolute;
        left: 50%;
        margin-left: -125px;
        top: 50%;
        z-index: 3;
        margin-top: -125px;

        div {
          position: absolute;
          left: 50%;
          top: 50%;
          width: 125px;
          margin-top: -15px;
          height: 30px;
          transform-origin: left;
          padding: 0 20px 0 40px;
          @include flex(row, space-between, center);

          img {
            width: 24px;
          }

          span {
            font-size: 12px;
            color: #fff;
          }
        }
      }
    }

    >span {
      color: #b5b6c8;
      font-size: 15px;
      display: block;
      text-align: center;
      margin-top: 20px;
    }

    .bottom {
      margin-top: 30px;
      margin: 0 auto;
      height: 80px;

      @include flex(row, space-around, center);

      li {
        min-width: 168px;
        width: 40%;
        height: 80px;
        padding: 0 10px;
        background-color: #1d1e22;
        @include flex(column, center, center);
        border-radius: 8px;
        border: 1px solid #4b4b53;

        span {
          font-size: 12px;
          color: #a4adc2;
        }

        strong {
          font-size: 18px;
          color: #f0e80d;
        }
      }

      .item {
        height: 80px;
      }

      li:nth-child(2) {
        position: relative;
        padding: 3px;

        .el-carousel {
          width: 100%;
        }

        .auto {
          width: 160px;
          cursor: pointer;

          dd {
            width: 100%;
          }

          dd:nth-child(1) {
            @include flex(column, flex-start, flex-start);

            div:nth-child(1) {
              @include flex(row, flex-start, center);

              img {
                width: 25px;
                margin-right: 5px;
              }

              span {
                font-size: 15px;
                color: #a4adc2;
              }
            }

            p {
              padding-left: 30px;

              span {
                color: #2df449;
                margin: 0 4px;
                font-size: 12px;
              }

              i {
                font-style: normal;
                font-size: 12px;
                color: #fff;
              }
            }
          }

          dd:nth-child(2) {
            width: 100%;
            text-align: center;

            strong {
              font-weight: normal;
              color: #f550a1;
              font-size: 12px;
            }
          }
        }

        :deep(.el-icon) {
          position: absolute;
          right: 5px;
          top: 20px;
        }
      }
    }
  }
}
</style>
